import React from 'react';
import PropTypes from 'prop-types';
import Immutable from 'immutable';
import { Modal } from 'ywen-mobile-ui';
import BaseComponent from '../../components/common/baseComponent.js';
import Button from '../../components/common/button';
import CouponCell from './couponCell';

class CouponSelectModal extends BaseComponent {
  static propTypes = {
    selectFunc: PropTypes.func.isRequired,
    couponList: PropTypes.instanceOf(Immutable.List).isRequired,
    confirmFunc: PropTypes.func.isRequired,
    maxSelect: PropTypes.number.isRequired,
  }
  state = {
    show: false,
  }

  show = () => {
    this.setState({ show: true });
  }

  close = () => {
    this.setState({ show: false });
  }

  selectCoupon = (e, coupon, index) => {
    e.stopPropagation();
    const { selectFunc } = this.props;
    selectFunc(coupon, index);
  }

  render() {
    const { show } = this.state;
    const {
      couponList, confirmFunc, maxSelect,
    } = this.props;
    if (!show) {
      return null;
    }
    const cells = couponList.map((coupon, index) => {
      return (
        <div className="select-row" key={index} onClick={e => this.selectCoupon(e, coupon, index)}>
          <CouponCell coupon={coupon} />
          <i className={`iconfont icon-checkbox ${coupon.get('selected') ? 'icon-checked' : 'icon-unchecked'}`} />
        </div>
      );
    });
    return (
      <Modal className="coupon-select-modal" touchFunc={this.close}>
        <div className="content">
          {/* <div className="title-row">
            <i className="iconfont icon-warn" />
            <div className="title">该笔订单最多可使用加油优惠券{maxSelect}张</div>
          </div> */}
          <div className="list">
            {cells}
          </div>
          <Button title="确定" clickFunc={confirmFunc} className="action-btn" />
        </div>
      </Modal>
    );
  }
}

export default CouponSelectModal;

